<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-12 23:56:38
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-16 13:57:08
 * @Description: admin list
-->
<template>
  <div class="content">
    <el-card shadow="hover">
      <template #header> 管理员列表 </template>
      <el-table
        stripe
        highlight-current-row
        height="550"
        :data="adminList"
        style="width: 100%"
      >
        <el-table-column prop="id" label="id" width="60" />
        <el-table-column prop="username" label="账号" width="120" />
        <el-table-column prop="fullname" label="昵称" width="120" />
        <el-table-column label="头像" width="100">
          <template #default="scope">
            <el-avatar
              class="avatar"
              style=""
              :src="scope.row.avatar"
              fit="cover"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="60" />
        <el-table-column prop="tel" label="手机号" width="160" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column label="权限" width="110">
          <template #default="scope">
            <el-tag>{{ scope.row.role_name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              @click="handleRemove(scope.row.id, scope.$index)"
              type="danger"
              icon="Delete"
              >删除</el-button
            >
            <el-button
              @click="handleEdit(scope.row.id)"
              type="primary"
              icon="Edit"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive, onMounted } from "vue";
import { admin } from "@/api";
import { useRouter } from "vue-router";

const router = useRouter();

// 管理员列表
let adminList = ref((await admin.list({ pageindex: 1, pagesize: 30 })).data);

let imgList = adminList.value.map((item) => item.avatar);

/**
 * @description: 删除用户
 * @return {*}
 * @param {*} id 要删除的用户id
 * @param {*} index 要删除的用户列表索引
 */
const handleRemove = (id, index) => {
  ElMessageBox.confirm("是否删除该用户？", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let { status, msg } = await admin.remove({ id });
      if (status) {
        adminList.value.splice(index, 1);
      }
      ElMessage({
        type: status ? "success" : "error",
        message: msg,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

const handleEdit = (id) => {
  router.push({ path: "/admin/edit", query: { id } });
};
</script>

<style lang='less' scoped>
.avatar {
  height: 60px;
  width: 60px;
  vertical-align: middle;
  text-align: center;
}
</style>

